<template>
  <div class="page-content">
    <div class="question-group">
      <div class="left">
        <div class="header">
          <h3>题库分组</h3>
          <el-button type="primary" @click="addCategory" style="margin-right: 15px">
            添加一级分类
          </el-button>
        </div>

        <question-menu
          :tree-data="tableData"
          @select="questionDetail"
          @add="handleAddChild"
          @edit="handleEdit"
          @delete="handleDeleteChild"
        ></question-menu>
      </div>
      <div class="right">
        <div class="header">
          <h3>已选题库</h3>
        </div>
        <select-question-detail
          :key="selectQuestionKey"
          :edit-info="editData"
        ></select-question-detail>
      </div>
    </div>

    <!--      <art-table-->
    <!--        :data="tableData"-->
    <!--        style="width: 100%; margin-bottom: 20px"-->
    <!--        row-key="id"-->
    <!--        v-loading="tableLoading"-->
    <!--        :tree-props="{ children: 'children' }"-->
    <!--        default-expand-all-->
    <!--        :row-class-name="getRowClass"-->
    <!--      >-->
    <!--        <el-table-column prop="name" label="分组名称" width="1000">-->
    <!--          <template #default="scope">-->
    <!--            &lt;!&ndash; <i class="iconfont-sys icon-drag" :class="{ 'child-drag': scope.row.pid }">&#xe6dc;</i> &ndash;&gt;-->
    <!--            <svg-->
    <!--              v-if="scope.row.parentId !== '0'"-->
    <!--              t="1748587808708"-->
    <!--              class="icon"-->
    <!--              viewBox="0 0 1024 1024"-->
    <!--              version="1.1"-->
    <!--              xmlns="http://www.w3.org/2000/svg"-->
    <!--              p-id="7106"-->
    <!--              width="24"-->
    <!--              height="24"-->
    <!--            >-->
    <!--              <path-->
    <!--                d="M768 802.133333H256c-17.066667 0-34.133333-12.8-34.133333-34.133333V256c0-17.066667 12.8-34.133333 34.133333-34.133333s34.133333 17.066667 34.133333 34.133333v477.866667H768c17.066667 0 34.133333 12.8 34.133333 34.133333s-17.066667 34.133333-34.133333 34.133333z"-->
    <!--                fill="#C2CBCF"-->
    <!--                p-id="7107"-->
    <!--              ></path>-->
    <!--            </svg>-->
    <!--            <span>{{ scope.row.name }}</span>-->
    <!--          </template>-->
    <!--        </el-table-column>-->

    <!--        <el-table-column prop="img" label="分类图片">-->
    <!--          <template #default="scope">-->
    <!--            &lt;!&ndash; v-if="scope.row.parentId === '0'" &ndash;&gt;-->
    <!--            <img style="width: 30px; height: 30px" :src="scope.row.img" />-->
    <!--          </template>-->
    <!--        </el-table-column>-->

    <!--        <el-table-column prop="carIds" label="车型">-->
    <!--          <template #default="scope">-->
    <!--            <div v-if="scope.row.parentId === '0' && scope.row.carIds"-->
    <!--              >{{ scope.row.carName }}({{ scope.row.carTypes }})-->
    <!--            </div>-->
    <!--            <div v-else></div>-->
    <!--          </template>-->
    <!--        </el-table-column>-->

    <!--        <el-table-column prop="categoryIds" label="科目">-->
    <!--          <template #default="scope">-->
    <!--            <div v-if="scope.row.parentId === '0'">-->
    <!--              <el-button v-if="scope.row.categoryIds === '1'" round size="small" plain-->
    <!--                >科目一</el-button-->
    <!--              >-->
    <!--              <el-button v-if="scope.row.categoryIds === '2'" round size="small" plain-->
    <!--                >科目二</el-button-->
    <!--              >-->
    <!--              <el-button v-if="scope.row.categoryIds === '3'" round size="small" plain-->
    <!--                >科目三</el-button-->
    <!--              >-->
    <!--              <el-button v-if="scope.row.categoryIds === '4'" round size="small" plain-->
    <!--                >科目四</el-button-->
    <!--              >-->
    <!--            </div>-->
    <!--            <div v-else></div>-->
    <!--          </template>-->
    <!--        </el-table-column>-->

    <!--        <el-table-column prop="question" label="题目数量">-->
    <!--          <template #default="scope">-->
    <!--            <el-button-->
    <!--              v-if="-->
    <!--                (scope.row.parentId !== '0' && scope.row.children.length === 0) ||-->
    <!--                (scope.row.parentId === '0' && scope.row.children.length === 0)-->
    <!--              "-->
    <!--              link-->
    <!--              @click="questionDetail(scope.row)"-->
    <!--              >{{ scope.row.questionCount }}</el-button-->
    <!--            >-->
    <!--          </template>-->
    <!--        </el-table-column>-->

    <!--        <el-table-column prop="createTime" label="创建时间">-->
    <!--          <template #default="scope">-->
    <!--            {{ scope.row.createTime }}-->
    <!--          </template>-->
    <!--        </el-table-column>-->

    <!--        <el-table-column prop="id" label="分类ID" width="100"> </el-table-column>-->

    <!--        <el-table-column fixed="right" label="操作" min-width="120">-->
    <!--          <template #default="scope">-->
    <!--            <el-button-->
    <!--              v-if="!scope.row.children || scope.row.children.length === 0"-->
    <!--              link-->
    <!--              type="primary"-->
    <!--              @click="selectQuestion(scope.row)"-->
    <!--              >选题</el-button-->
    <!--            >-->
    <!--            <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>-->
    <!--            <el-button link type="warning" @click="handleAddChild(scope.row)"> 新增子类 </el-button>-->
    <!--            <el-button link type="danger" @click="handleDeleteChild(scope.row)"> 删除 </el-button>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--      </art-table>-->

    <!--    <question-type-dialog-->
    <!--      v-if="showQuestionType"-->
    <!--      :show-question-type-visible="showQuestionType"-->
    <!--      :edit-info="editData"-->
    <!--      @close-dialog="closeSelectionDialog"-->
    <!--    />-->

    <add-parent-node-dialog
      v-if="showAddParentDialog"
      :show-add-parent-dialog="showAddParentDialog"
      :edit-info="editData"
      @close-dialog="handleCloseAddParent"
    ></add-parent-node-dialog>

    <add-child-node-dialog
      v-if="showAddChildDialog"
      :show-add-child-dialog="showAddChildDialog"
      :edit-info="editData"
      :opera-type="operaTypeValue"
      @close-dialog="handleCloseAddChild"
    ></add-child-node-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import { getcategoryList, operationCategory } from '@/api/questionbanklabel'
  // import questionTypeDialog from './components/questionTypeDialog.vue'
  import SelectQuestionDetail from './components/selectQuestionDetail.vue'
  import addParentNodeDialog from './components/addParentNodeDialog.vue'
  import addChildNodeDialog from './components/addChildNodeDialog.vue'
  import { ElMessageBox } from 'element-plus'
  import QuestionMenu from './components/QuestionMenu.vue'

  interface User {
    id: number | string
    name: string
    img: string
    parentId?: string | number
    questionCount?: number
    children?: User[]
  }

  // const showQuestionType = ref(false)
  const showQuestionDetailVisible = ref(false)
  const showAddParentDialog = ref(false)
  const showAddChildDialog = ref(false)
  const editData = ref({ id: '' })
  const operaTypeValue = ref('add')
  const tableLoading = ref(false)
  const selectQuestionKey = ref(1)

  const tableData = ref<User[]>([])

  function questionDetail(item: User) {
    showQuestionDetailVisible.value = true
    editData.value = JSON.parse(JSON.stringify(item))
    selectQuestionKey.value = new Date().getTime()
  }

  function addCategory() {
    showAddParentDialog.value = true
    editData.value = { id: '' }
  }

  function handleAddChild(item: User) {
    if (item.parentId !== '0' && item.questionCount !== 0) {
      ElMessage.info('此分类已添加题目，无法添加子类')
      return
    }

    showAddChildDialog.value = true
    operaTypeValue.value = 'add'
    editData.value = JSON.parse(JSON.stringify(item))
  }

  function handleCloseAddParent(value: boolean) {
    showAddParentDialog.value = false
    if (value) {
      getData()
    }
  }

  function handleCloseAddChild(value: boolean) {
    showAddChildDialog.value = false
    if (value) {
      getData()
    }
  }

  // function closeSelectionDialog(value: boolean) {
  //   showQuestionType.value = false
  //   if (value) {
  //     getData()
  //   }
  // }

  // function closeQuestionDialog(value: boolean) {
  //   showQuestionDetailVisible.value = false
  //   if (value) {
  //     getData()
  //   }
  // }

  function handleEdit(item: User) {
    if (item.parentId === '0') {
      showAddParentDialog.value = true
    } else {
      showAddChildDialog.value = true
      operaTypeValue.value = 'edit'
    }
    editData.value = JSON.parse(JSON.stringify(item))
  }

  function handleDeleteChild(item: User) {
    ElMessageBox.confirm('确定删除该分类吗？', '确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      handleDelete(String(item.id))
    })
  }

  async function handleDelete(id: string) {
    const res = await operationCategory.deleteCategory(id)
    if (res.code === '00000') {
      await getData()
    }
  }

  // function selectQuestion(item: User) {
  //   showQuestionType.value = true
  //   editData.value = JSON.parse(JSON.stringify(item))
  // }

  // function getRowClass({ row }: { row: User }) {
  //   return row.parentId !== '0' ? 'row-child' : 'row-parent'
  // }

  async function getData() {
    try {
      tableLoading.value = true
      const res = await getcategoryList.getcategoryId({
        pageNum: 1,
        pageSize: 1000
      })
      if (res.code === '00000') {
        tableData.value = res.data.list
      }
    } catch (e) {
    } finally {
      tableLoading.value = false
    }
  }

  onMounted(() => {
    getData()
  })
</script>

<style lang="scss" scoped>
  ::v-deep(.row-parent) {
    background-color: #f4f6f8;
  }

  ::v-deep(.row-child) {
    background-color: #fff;
  }

  .drag-over-line {
    position: absolute;
    height: 2px;
    background-color: #409eff;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
  }

  .icon-drag {
    color: var(--el-color-primary);
    margin-right: 10px;
    cursor: move;
  }

  .icon-rotate {
    color: var(--el-color-primary);
    display: inline-block;
  }

  .icon {
    margin-right: 10px;
    margin-bottom: -6px;
  }

  .child-drag {
    padding-left: 45px;
  }

  .question-group {
    display: flex;

    .left {
      width: 300px;
      margin-right: 20px;
      border-right: 1px solid #ccc;

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
    }

    .right {
      flex: 1;

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
    }
  }
</style>
